﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css" />
	<style type="text/css">
body{text-align:left}
.container{background-color:#acc}
.control{border:solid 1px #789;background-color:#abc;cursor:move}
.tbctl{border:solid 1px #aaa;background-color:#abc;cursor:move}
	</style>
</head>
<body class=" yui-skin-sam">
<div id="doc">
<div id="hd">
<h1></h1>
</div>
<div id="bd">
	<div class="yui-g">
		<div id="c1" class="yui-u first container">
		</div>
		<div id="c2" class="yui-u container">
		</div>
	</div>
	<div class="yui-gb">
		<div id="c3" class="yui-u first container">
		</div>
		<div id="c4" class="yui-u container">
		</div>
		<div id="c5" class="yui-u container">
		</div>
	</div>
</div>
<div id="ft">
</div>
</div>
<div id="toolbox">
	<div class="hd">工具箱</div>
	<div id='tbbd' class="bd">
		<div id="ctl001" class="tbctl">有个控件</div>
	</div>
</div>
</body>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
<script type="text/javascript">

(function(){
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

JzApp = {
	init:function(){
		for(var i=1; i<=5; i++){
			new YAHOO.util.DDTarget("c" + i);
		}
		new JzToolboxControl("ctl001");
	}
};

JzControl = function(id, sGroup, config) {
	JzControl.superclass.constructor.call(this, id, sGroup, config);

    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67);

    this.goingUp = false;
    this.lastY = 0;
};

YAHOO.extend(JzControl, YAHOO.util.DDProxy, {
	startDrag: function(x,y){
		var dragEl = this.getDragEl();
		var clickEl = this.getEl();
		Dom.setStyle(clickEl, "visibility", "hidden");
	},
	
	endDrag: function(e) {

		var srcEl = this.getEl();
		var proxy = this.getDragEl();

		Dom.setStyle(proxy, "visibility", "");
		var a = new YAHOO.util.Motion( 
			proxy, { 
				points:{to: Dom.getXY(srcEl)}
			}, 
			0.2, 
			YAHOO.util.Easing.easeOut 
		)
		var proxyid = proxy.id;
		var thisid = this.id;

		a.onComplete.subscribe(function() {
			Dom.setStyle(proxyid, "visibility", "hidden");
			Dom.setStyle(thisid, "visibility", "");
		});
		a.animate();
	},

    onDragDrop: function(e,id) {
        if (DDM.interactionInfo.drop.length === 1) {
            var pt = DDM.interactionInfo.point; 
            var region = DDM.interactionInfo.sourceRegion; 

            if (!region.intersect(pt)) {
                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
            }
        }
    },

    onDrag: function(e) {
        var y = Event.getPageY(e);

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
        var srcEl = this.getEl();
        var destEl = Dom.get(id);

        if (destEl.id.substr(0,3) == "ctl") {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;

            if (this.goingUp) {
                p.insertBefore(srcEl, destEl); // insert above
            } else {
                p.insertBefore(srcEl, destEl.nextSibling); // insert below
            }

            DDM.refreshCache();
        }
    }
});

JzToolboxControl = function(id, sGroup, config) {
	JzToolboxControl.superclass.constructor.call(this, id, sGroup, config);

    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67);

    this.goingUp = false;
    this.lastY = 0;
    
    this.invalidDropEvent.subscribe(this.invalidDrop, this);
};

YAHOO.extend(JzToolboxControl, YAHOO.util.DDProxy, {
	newCtrl: new Object(),
	
	startDrag: function(x,y){
		this.newCtrl = document.createElement("div");
		this.newCtrl.id="ctl"+Math.random();
		this.newCtrl.className="control";
		this.newCtrl.innerHTML="我是一个<b>控件</b><br/>我的ID是：" + this.newCtrl.id;
		Dom.setStyle(this.newCtrl.id, "visibility", "hidden");
	},
	
	endDrag: function(e) {
	},
	
	invalidDrop:function(){
		alert('invalid');
	},

    onDragDrop: function(e,id) {
        if (DDM.interactionInfo.drop.length === 1) {
            var pt = DDM.interactionInfo.point; 
            var region = Dom.getRegion(this.newCtrl); 

                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
				Dom.setStyle(this.newCtrl.id, "visibility", "");
                new JzControl(this.newCtrl.id);
                destDD.isEmpty = false;
                DDM.refreshCache();
            if (!region || !region.intersect(pt)) {
                destEl.appendChild(this.newCtrl);
            }
        }
        
        if(!DDM.interactionInfo.validDrop)
        {
			this.newCtrl.parentNode.removeChild(this.newCtrl);
        }
    },

    onDrag: function(e) {
        var y = Event.getPageY(e);

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
        var destEl = Dom.get(id);
		Dom.setStyle(this.newCtrl.id, "visibility", "hidden");

        if (destEl.id.substr(0,3) == "ctl") {
            var p = destEl.parentNode;

            if (this.goingUp) {
                p.insertBefore(this.newCtrl, destEl); // insert above
            } else {
                p.insertBefore(this.newCtrl, destEl.nextSibling); // insert below
            }

            DDM.refreshCache();
        }
    }
});

Event.onDOMReady(JzApp.init, JzApp, true);

YAHOO.util.Event.onContentReady("toolbox", function () {
	var toolbox = new YAHOO.widget.Panel("toolbox", {
		visible:true,
		close:false,
		draggable:true,
		dragOnly:true,
		constraintoviewport:true,
		width:"100px"});
	toolbox.moveTo(10,10);
	toolbox.render();
});

})();
</script>
</html>
